<template>
	<div class="page">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" title="Thay đổi mật khẩu đăng nhập" left-arrow @click-left="onClickLeft"></van-nav-bar>
		<div class="cp-wrapper">
			<div class="cardTitle" style="pointer-events: auto;">
				<van-button @click="onTabA(index)" v-for="(item,index) in tabsA" :key="item" :class="curA == index?'btnArc':''" >{{item}}</van-button>
			</div>
			<div class="pane" v-if="curA == 0">
				<van-form class="quota-form" @submit="onSubmit">
					<div class="remindText">Mật khẩu gồm 6-15 ký tự chữ và số</div>
					<van-field
					v-model="pwd1"
					type="password"
					placeholder="Mật khẩu cũ"
					/>
					<van-field
					v-model="pwd2"
					type="password"
					placeholder="Mật khẩu mới"
					/>
					<van-field
					v-model="pwd3"
					type="password"
					placeholder="Xác nhận mật khẩu mới"
					/>
					<div class="form-foot">
						<van-button round block type="info" native-type="submit"> Chuyển đổi ngay </van-button>
					</div>
				</van-form>
				
			</div>
			<div class="pane" v-if="curA == 1">
				<van-form class="quota-form" @submit="onSubmit">
					<div class="remindText">Mật khẩu gồm 6-15 ký tự chữ và số</div>
					<van-field
					v-model="ravalue"
					type="password"
					placeholder="Nhập mật khẩu giao dịch"
					/>
					<van-field
					v-model="vaovalue"
					placeholder="Xác nhận mật khẩu giao dịch"
					/>
					<div class="form-foot">
						<van-button round block type="info" native-type="submit"> Chuyển đổi ngay </van-button>
					</div>
				</van-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				curA: 0,
				tabsA: ['Tin nhắn', 'Thông báo'],
			}
		},
		methods: {
			onTabA(e) {
				this.curA = e
			},
			onClickLeft() {
				this.$router.go(-1)
			}
		}
	}
</script>
<style>
</style>
